<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atomics对象</title>
</head>
<body>
    <h1>Atomics对象</h1>
    <h2>提供原子操作，用于多线程环境下的数据同步</h2>

    <script>
        // 基本的原子操作
        const buffer = new SharedArrayBuffer(32);
        const int32 = new Int32Array(buffer);

        // 原子性写入
        Atomics.store(int32, 0, 42);
        console.log(Atomics.load(int32, 0)); // 42

        // 原子性加法
        Atomics.add(int32, 1, 10);
        console.log(Atomics.load(int32, 1)); // 10

        // 原子性减法
        Atomics.sub(int32, 1, 5);
        console.log(Atomics.load(int32, 1)); // 5

        // 实际应用示例
        // 1. 原子计数器
        class AtomicCounter {
            constructor() {
                this.buffer = new SharedArrayBuffer(4);
                this.view = new Int32Array(this.buffer);
            }

            increment() {
                return Atomics.add(this.view, 0, 1);
            }

            decrement() {
                return Atomics.sub(this.view, 0, 1);
            }

            get value() {
                return Atomics.load(this.view, 0);
            }
        }

        // 2. 线程同步
        class Mutex {
            constructor() {
                this.buffer = new SharedArrayBuffer(4);
                this.view = new Int32Array(this.buffer);
            }

            lock() {
                while (true) {
                    if (Atomics.compareExchange(this.view, 0, 0, 1) === 0) {
                        return;
                    }
                    Atomics.wait(this.view, 0, 1);
                }
            }

            unlock() {
                if (Atomics.compareExchange(this.view, 0, 1, 0) !== 1) {
                    throw new Error('Mutex is not locked');
                }
                Atomics.notify(this.view, 0, 1);
            }
        }

        // 3. 原子队列
        class AtomicQueue {
            constructor(capacity) {
                this.buffer = new SharedArrayBuffer((capacity + 2) * 4);
                this.view = new Int32Array(this.buffer);
                this.capacity = capacity;
            }

            enqueue(value) {
                const head = Atomics.load(this.view, 0);
                const tail = Atomics.load(this.view, 1);
                
                if ((tail + 1) % this.capacity === head) {
                    return false; // 队列已满
                }

                this.view[2 + tail] = value;
                Atomics.store(this.view, 1, (tail + 1) % this.capacity);
                return true;
            }

            dequeue() {
                const head = Atomics.load(this.view, 0);
                const tail = Atomics.load(this.view, 1);
                
                if (head === tail) {
                    return null; // 队列为空
                }

                const value = this.view[2 + head];
                Atomics.store(this.view, 0, (head + 1) % this.capacity);
                return value;
            }
        }

        // 4. 原子性的条件变量
        class Condition {
            constructor() {
                this.buffer = new SharedArrayBuffer(4);
                this.view = new Int32Array(this.buffer);
            }

            async wait() {
                let result;
                while ((result = Atomics.wait(this.view, 0, 0)) === 'not-equal') {
                    // 继续等待
                }
                return result;
            }

            notify() {
                Atomics.notify(this.view, 0, 1);
            }

            notifyAll() {
                Atomics.notify(this.view, 0, Infinity);
            }
        }
    </script>
</body>
</html> 